<script lang="ts" setup>
import { ref, reactive } from 'vue'
const icon_1 = "https://shq.qdjqy.cn/profile/0911/order/icon_1.png"
const swipter = "https://shq.qdjqy.cn/profile/0911/order/swipter.png"
const youjian = "https://shq.qdjqy.cn/profile/0911/order/youjian.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '全部' },
  { title: '待支付' },
  { title: '已支付' },
  { title: '已关闭' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

// interface Coupon {
//   id: number,
//   staus: string,
//   title: string,
//   validTime: string,
//   userName?: string,
//   cardNo?: string,
//   phone?: string
// }

// const couponList = reactive<Coupon[]>([
//   { id: 1, staus: 'bind', title: '单人卡', validTime: '2020.08.05', userName: '张三', cardNo: '370234188912234321', phone: '13812345678' },
//   { id: 2, staus: 'needBind', title: '箱包品类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
//   { id: 3, staus: 'needRegister', title: '服饰类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
//   { id: 4, staus: 'past', title: '电子数码类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
//   { id: 5, staus: 'bind', title: '无门槛', validTime: '2020.08.05', userName: '李四', cardNo: '370234188912230000', phone: '13812345678' },
//   { id: 6, staus: 'needRegister', title: '无门槛', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
// ])

// const couponNeedRegister = computed(() => {
//   return (statu:string) => {
//     return (statu === 'needRegister' && tab.value === 1) || (statu === 'needRegister' && tab.value === 0)
//   }
// })

// const couponNeedBind = computed(() => {
//   return (statu:string) => {
//     return (statu === 'needBind' && tab.value === 2) || (statu === 'needBind' && tab.value === 0)
//   }
// })
</script>

<template>
  <view class="order-container">
    <wd-navbar left-text="我的订单" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <wd-tabs v-model="tab" @change="handleChange">
      <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
        <view class="order-content">
          
          <view class="ul">
            <view class="ul-info flex">
              <image :src="swipter" class="ul-image" mode="center"></image>
              <view class="ul-content">
                <view class="ul-con-tit">机遇时空X-META全感VR乐园 </view>
                <view class="ul-con-tip">规格规格</view>
                <view class="ul-con-btn flex">
                  <span class="ul-con-btn-li">七天无理由</span>
                  <span class="ul-con-btn-li">七天无理由</span>
                </view>
              </view>
              <view class="ul-price">￥50</view>
            </view>
            <view class="ul-address flex">
              <image :src="icon_1" class="ul-address-img"></image>
              <view class="ul-address-tip">运输中</view>
              <view class="ul-address-txt">【淮安市】快件已发往 青岛转运中心...</view>
              <image :src="youjian" class="ul-address-icon"></image>
            </view>
            <view class="ul-pay flex">
              <view class="ul-pay-tip">实付款￥</view>
              <view class="ul-pay-price">50</view>
            </view>
            <view class="ul-oprate flex">
              <wd-button type="text" size="small" custom-class="ul-oprate-btn2">更多</wd-button>
              <view class="flex">                
                <wd-button plain hairline type="info" size="small" custom-class="ul-oprate-btn">申请售后</wd-button>
                <wd-button plain hairline type="info" size="small" custom-class="ul-oprate-btn">查看物流</wd-button>
                <wd-button type="error" size="small" custom-class="ul-oprate-btn">确认收货</wd-button>
              </view>
            </view>
          </view>

        </view>
      </wd-tab>
    </wd-tabs>
    
  </view>
</template>

<style lang="scss" scoped>
.order-container {
  & .order-content {
    width: 750rpx;
    & .ul {
      width: 710rpx;
      margin: 20rpx 20rpx;
      box-shadow: 0 14px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
      padding: 30rpx 20rpx;
      box-sizing: border-box;

      & .ul-info {
        position: relative;
        & .ul-image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 10rpx;
        }
        & .ul-content {
          width: 490rpx;
          height: 160rpx;
          // border: 1px solid #000;
          margin-left: 20rpx;
          & .ul-con-tit {
            font-size: 30rpx;
            font-weight: 700;            
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box; //作为弹性伸缩盒子模型显示。
            -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
            -webkit-line-clamp:2; //显示的行
          }
          & .ul-con-tip {
            margin-top: 6rpx;
            font-size: 26rpx;
            color: #4D526C;
          }
          & .ul-con-btn {
            position: absolute;
            bottom: 0rpx;
            left: 180rpx;
            & .ul-con-btn-li {
              font-size: 20rpx;
              padding: 5rpx 15rpx;
              color: #FF3427;
              border: 1px solid #FF3427;
              border-radius: 16rpx;
              margin-right: 10rpx;
            }
          }
        }
        & .ul-price {
          position: absolute;
          bottom: 0;
          right: 0rpx;
          font-size: 38rpx;
          color: #333;
          font-weight: 700;
        }
      }
      & .ul-address {
        width: 670rpx;
        height: 60rpx;
        background-color: #F8F8F8;
        border-radius: 10rpx;
        margin: 30rpx 0;
        box-sizing: border-box;
        padding: 0 20rpx;
        line-height: 60rpx;
        font-size: 26rpx;

        & .ul-address-img {
          width: 36rpx;
          height: 30rpx;
          margin: 17rpx 15rpx 0 0;
        }
        & .ul-address-tip {
          font-weight: 700;
          color: #333;

        }
        & .ul-address-txt {
          margin: 0 10rpx 0 20rpx;
          width: 450rpx;
          color: #aaa;
          overflow:hidden; //超出的文本隐藏
          text-overflow:ellipsis; //溢出用省略号显示
          white-space:nowrap; //溢出不换行
        }
        & .ul-address-icon {
          width: 20rpx;
          height: 20rpx;
          margin: 23rpx 0 0 0;
        }
      }
      & .ul-pay {
        width: 670rpx;
        // border: 1px solid #000;
        margin: 0rpx 0;
        box-sizing: border-box;
        text-align: right;
        justify-content: flex-end;

        & .ul-pay-tip {
          font-size: 28rpx;
          font-weight: 700;
          color: #333;
          margin-top: 15rpx;
        }
        & .ul-pay-price {
          font-size: 44rpx;
          font-weight: 700;
          color: #333;
        }
      }
      & .ul-oprate {
        justify-content: space-between;
        margin-top: 20rpx;
        :deep() {
          .ul-oprate-btn {
            margin-left: 15rpx;
          }
          .ul-oprate-btn2 {
            margin-left: 10rpx;
            color: #aaa!important;
          }
        }
      }




      // <view class="ul-pay flex">
      //         <view class="ul-pay-tip">实付款</view>
      //         <view class="ul-pay-price">￥50</view>
      //       </view>
      //       <view class="ul-oprate flex">
      //         <wd-button type="text" size="small">文字按钮</wd-button>
      //         <view class="ul-oprate-btn flex">                
      //           <wd-button plain hairline type="info" size="small">主要按钮</wd-button>
      //           <wd-button plain hairline type="info" size="small">主要按钮</wd-button>
      //           <wd-button type="error" size="small">危险按钮</wd-button>
      //         </view>
      //       </view>
    }
  }
}
</style>

